<!-- 编辑个人资料 -->
<template>
	<form @submit="formSubmit" class="my-form">
		<view class="my-form-item my-form-column">
			<view class="my-form-title">昵称</view>
			<view class="">
				<input type="text" :value="nickName" placeholder="请输入昵称" />
			</view>
		</view>
		<view class="my-form-item my-form-column">
			<view class="my-form-title">手机</view>
			<view class="">
				<input type="text" value="" placeholder="请输入手机" />
			</view>
		</view>
		<view class="my-form-item my-form-column">
			<view class="my-form-title">性别</view>
			<radio-group name="radio" @change="radioChange">
				<label style="margin-right: 10px;">				
					<radio value="male" :checked="sex==='male'" />
					<text>女</text>
				</label>
				<label>
					<radio value="female" :checked="sex==='female'" />
					<text>男</text>
				</label>
			</radio-group>
		</view>
		<view class="my-form-item my-form-column">
			<view class="my-form-title">生日</view>
			<view class="">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="my-form-input">{{date}}</view>
				</picker>
			</view>
		</view>
		<view class="my-btn-v">
			<button class="my-btn" form-type="submit" type="primary">保存</button>
		</view>
	</form>
</template>

<script>
	export default {
		created() {
			this.sex = this.$store.state.sex;
			this.nickName = this.$store.state.nickName;
			console.log(this.$store,"store");
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				nickName: "",
				date: currentDate,
				sex: "male",
				tel: "",
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			radioChange(e) {
				this.sex = e.datail.value;
			},
			bindDateChange(e) {
				this.date = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			formSubmit() {
				this.$store.commit("setSex", this.sex);
				this.$store.commit("setTel", this.tel);
				this.$store.commit("setDate", this.date);
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-form {
		.my-form-item {
			padding: 10px;
			.my-form-title {
				padding: 10px 0;
			}
		}
	}
	.my-btn-v {
		position: absolute;
		box-sizing: border-box;
		width: 100%;
		height: 40px;
		bottom: 0px;
		padding: 0 10px;
		.my-btn {
			border-radius: 20px;
			height: 40px;
			line-height: 40px;
			font-size: 16px;
		}
	}
</style>